<!--
 * @Author: jiu yin
 * @Date: 2024-04-23 17:22:19
 * @LastEditTime: 2024-04-24 13:54:33
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\pagesA\scenic_punch\index.vue
 * jiu
-->
<template>
    <view class="punch-list">
        <custom_navbar :title="navbar_title" theme="light" />
        <view class="list-box">
            <view v-if="punchList.length !== 0">
                <punch_item v-for="(item, index) in punchList" :key="index" :info="item" :spot_id="spotId"></punch_item>
            </view>
            <view v-else class="list-nodata">暂无数据</view>
        </view>
    </view>
</template>

<script>
import { navigateTo, navigateBack } from "@/hooks";
import { naviScenicSpots } from "@/api/home.js";
import custom_navbar from "@/components/custom_navbar/index.vue";
import punch_item from "@/components/punch_item/index.vue";

export default {
	components: { custom_navbar, punch_item },
	data() {
		return {
			navigateTo,
            navbar_title: "景点打卡",
            curPage: 0,
            total: 0,
            punchList: [],
            spotId: 0,
			
			on_1: '',
			on_2: '',
			
			isOpenLocation: false,
			locate:{
				lng:"",
				lat:""
			}
		}
	},
    computed: {
		rec_url() {
			return this.$store.getters.rec_url;
		}
	},
    onLoad(options) {
        if (options.id) {
            this.spotId = Number(options.id);
        }
        //this.getPunchList();
		// 是否已经获得地理授权
		wx.getSetting({
			success: res => {
				if (res.authSetting['scope.userLocation']) {
					// 已经授权，可以直接调用获取位置信息的方法
					//this.getLocation();
				} else {
					// 未授权，展示一个提示框，引导用户去授权
					this.showAuthorizePrompt();
					this.isOpenLocation = true;
				}
			}
		});
		
		this.clickThis(1);
	},
    onReachBottom() {
		this.loadMore();
	},
    methods: {
        loadMore() {
            let isLoad = Math.ceil(this.total / 10) > this.curPage;
            if (isLoad) {
                this.getPunchList();
            }
        },
        getPunchList() {
			if(!this.locate.lng || !this.locate.lat){
				uni.showToast({
				   title: '请授权获取您的地理位置',
				   icon: 'none',
				});
				return false;
			}
			
            let params = {
                page: this.curPage + 1,
                limit: 10,
                spot_id: this.spotId,
				points_type: this.points_type,
				locate_lng:this.locate.lng,
				locate_lat:this.locate.lat,
            };
            naviScenicSpots(params).then(res => {
                if (res.code == 200) {
                    this.curPage = params.page;
                    this.total = res.data.total;
                    let datas = [...this.punchList];
                    if (res.data.length > 0 ) {
                        if (params.page > 1) {
                            datas.push(...res.data)
                        } else {
                            datas = res.data;
                        }
                        datas.map(item => {
						if (item.face) {
							item.face = this.rec_url + item.face;
						}
						return item;
					})
                    } else {
                        datas = [];
                    }
                    this.punchList = datas;
                }
            })
        },
		clickThis(t) {
			if (t == 1) {
				this.on_1 = 'on';
				this.on_2 = '';
		
			} else {
				this.on_2 = 'on';
				this.on_1 = '';
			}		
		
			this.curPage = 0;
			this.total= 0;
			this.punchList = [];
			this.points_type = t;
			
			wx.getLocation({
				type: 'gcj02 ', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于地图的坐标
				success: (res) => {
					this.locate.lat = res.latitude;
					this.locate.lng = res.longitude;
					this.getPunchList();
					
				},
				fail: (err) => {
					uni.showToast({
					   title: '请授权获取您的地理位置',
					   icon: 'none',
					});
					return false;
				}
			});
			
			
		},
		getLocation() {
			wx.getLocation({
				type: 'gcj02 ', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于地图的坐标
				success: (res) => {
					this.locate.lat = res.latitude;
					this.locate.lng = res.longitude;
					
					//console.log('---',this.locate);
					//console.log('已获取到当前位置：', res);
				},
				fail: (err) => {
					// console.error('获取位置信息失败：', err);
				}
			});
		},
		
		
		openLocation() {
			wx.openSetting({
				success: (res) => {
					// console.log('重新获取地址成功：', res);
					if (res.authSetting['scope.userLocation']) {
						// 已经授权，可以直接调用获取位置信息的方法
						this.getLocation();
						this.isOpenLocation = false;
					} else {
						// 未授权，展示一个提示框，引导用户去授权
						this.showAuthorizePrompt();
					}
				}
			});
		}
    },
}
</script>

<style lang="scss" scoped>
.punch-list {
    height: 100vh;
    background-color: #F6F9F8;
    .list-box {
        padding: 30rpx 24rpx 40rpx;
        background-color: #F6F9F8;
    }
    .list-nodata {
        height: 200rpx;
        line-height: 200rpx;
        text-align: center;
        background-color: #fff;
        border-radius: 32rpx;
    }
}
</style>